/*
 * Copyright (c) 2016 Razeware LLC
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

'use strict';
 
import React from 'react';
import ReactNative, {
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  NativeModules,
  NativeEventEmitter,
} from 'react-native';

const { AddRatingManager } = NativeModules;
const Rating = require('./Rating');

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
  },
  welcome: {
    fontSize: 20,
    color: 'white',
  },
  navBar: {
    backgroundColor: '#25507b',
  },
  navBarText: {
    fontSize: 16,
    marginVertical: 10,
  },
  navBarTitleText: {
    color: 'white',
    fontWeight: '500',
    marginVertical: 9,
  },
  navBarLeftButton: {
    paddingLeft: 10,
  },
  navBarRightButton: {
    paddingRight: 10,
  },
  navBarButtonText: {
    color: 'white',
  },
});
 
class AddRatingApp extends React.Component {
  constructor(props) {
    super(props);
    this._subscription = null;
    this.state = {
      identifier: props.identifier,
      currentRating: props.currentRating,
    }
  }

  componentDidMount() {
    const AddRatingManagerEvent = new NativeEventEmitter(AddRatingManager);
    this._subscription = AddRatingManagerEvent.addListener(
      'AddRatingManagerEvent',
      (info) => {
        console.log(JSON.stringify(info));
      }
    );
  }

  componentWillUnmount() {
    this._subscription.remove();
  }

  onRatingSelected(selectedRating) {
    this.setState({
      currentRating: selectedRating,
    });
  }

  _renderScene(route, navigator) {
    return (
      <Rating
        title={route.title}
        navigator={navigator}
        rating={this.state.currentRating}
        ratingSelectionHandler={this.onRatingSelected.bind(this)}
      />
    );
  }

  _renderNavTitle(route, navigator, index, navState) {
    return <Text style={styles.navBarTitleText}>{route.title}</Text>;
  }

  _renderNavLeftItem(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={() => {
          AddRatingManager.dismissPresentedViewController(this.props.rootTag);
        }}
        style={styles.navBarLeftButton}>
        <Text style={[styles.navBarText, styles.navBarButtonText]}>
          Cancel
        </Text>
      </TouchableOpacity>
    );
  }

  _renderNavRightItem(route, navigator, index, navState) {
    if (this.state.currentRating > 0) {
      return (
        <TouchableOpacity
          onPress={() => {
            AddRatingManager.save(
              this.props.rootTag,
              this.state.currentRating,
              this.state.identifier
            );
          }}
          style={styles.navBarRightButton}>
          <Text style={[styles.navBarText, styles.navBarButtonText]}>
            Save
          </Text>
        </TouchableOpacity>
      );
    }
    return null;
  }

  render() {
    return (
      <Navigator
        debugOverlay={false}
        style={styles.container}
        initialRoute={{title: 'Add Rating'}}
        renderScene={this._renderScene.bind(this)}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={{
              LeftButton: this._renderNavLeftItem.bind(this),
              RightButton: this._renderNavRightItem.bind(this),
              Title: this._renderNavTitle.bind(this),
            }}
            style={styles.navBar}
          />
        }
      />
    );
  }
}
 
module.exports = AddRatingApp;
